import React, { Component } from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import WPT from 'wpt';

import Carousel from 'components/Carousel';

import S from './index.m.less';

export default class SwiperBanner extends Component {
    static propTypes = {
        items: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]).isRequired,
        transItem: PropTypes.func,
        className: PropTypes.string,
        onItemClick: PropTypes.func,
        // itemHeight: PropTypes.string,
        autoplaySpeed: PropTypes.number,
        speed: PropTypes.number,
        width: PropTypes.string,
        rect: PropTypes.string,
        borderRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        autoplay: PropTypes.bool,
    };

    static defaultProps = {
        items: [],
        autoplaySpeed: 5000,
        speed: 500,
        width: '7.5rem',
        rect: 'w750h300',
        borderRadius: 0,
        autoplay: true,
    };

    transItem = (item) => {
        const { transItem } = this.props;
        return transItem ? transItem(item) : item;
    };

    handleItemClick = (item, i) => () => {
        const { onItemClick } = this.props;
        item.url && WPT.showPage(item.url);
        onItemClick && onItemClick(item, i);
    };

    transItems = (items = []) => {
        if (!Array.isArray(items) && ($.isPlainObject(items) || typeof items === 'string')) {
            return [items].map(this.transItem);
        } else if (Array.isArray(items)) {
            return items.map(this.transItem);
        }
        return [];
    };

    transStyle = (image = false) => {
        const { width, rect, borderRadius } = this.props;
        const w = Number.parseFloat(width);
        const [, _w, _h] = rect.match(/w(\d+)h(\d+)/i);
        const h = Math.floor((_h / _w) * w * 100) / 100;
        return {
            borderRadius,
            width: `${w}rem`,
            ...(!image && { height: `${h}rem` }),
        };
    };

    renderItems = () => {
        const { items, className, autoplay, autoplaySpeed, speed } = this.props;
        const data = this.transItems(items);
        if (!data.length) {
            return null;
        }
        if (data.length === 1) {
            return this.renderItem({ item: data[0] }, true);
        }
        return (
            <Carousel
                mainClassName={cx(S.swiperBanner, className)}
                wrapStyle={this.transStyle()}
                renderItem={this.renderItem}
                autoplaySpeed={autoplaySpeed}
                speed={speed}
                data={data}
                autoplay={autoplay}
                infinite
                draggable={!WPT.os.pc}
            />
        );
    };

    renderItem = ({ item = {}, index }, onlyOne = false) => {
        const { className } = this.props;
        return (
            <LazyImage
                className={onlyOne === true ? cx(S.swiperBanner, className) : S.swiperItem}
                style={{ ...(onlyOne === true && this.transStyle(true)) }}
                src={item.icon || item.image || item}
                onClick={this.handleItemClick(item, index)}
                hasBlur={false}
                size={0}
                loaded
                autoHeight
            />
        );
    };

    render() {
        return this.renderItems();
    }
}
